{% extends 'base.html' %}
{% block body %}
    <form id="image-form" class="form-horizontal" action='{{ url_for('filter_bp.image_filter') }}' method="post"
          enctype="multipart/form-data">

        <h2>图像滤镜处理</h2>
        <div class="form-group">
            <h3>原始图像:</h3>
            <input type="file" name="image" required>
        </div>

        <div class="form-group">
            <h3>滤镜</h3>
            <label for="mode">选择滤镜:</label>
            <select id="mode" name="mode"  class="filter-mode" required>

                {# 无参数滤波器 #}
                <option value="BLUR">模糊滤波</option>
                <option value="CONTOUR">轮廓滤波</option>
                <option value="DETAIL">细节增强</option>
                <option value="EDGE_ENHANCE">边缘增强滤波</option>
                <option value="EDGE_ENHANCE_MORE">深度边缘增强</option>
                <option value="EMBOSS">浮雕滤波</option>
                <option value="FIND_EDGES">寻找边缘信息</option>
                <option value="SHARPEN">锐化滤波</option>
                <option value="SMOOTH">平滑滤波</option>
                <option value="SMOOTH_MORE">深度平滑滤波</option>

                {# 单参数滤波器 radius=3 #}
                <option value="GaussianBlur">高斯模糊</option>

                {# 单参数滤波器 size=3 #}
                <option value="MedianFilter">中值滤波</option>
                <option value="MinFilter">最小值滤波</option>
                <option value="MaxFilter">最大值滤波</option>
                <option value="ModeFilter">模式滤波</option>

                {# 多参数滤波器 (radius=2, percent=150, threshold=3)#}
                <option value="UnsharpMask">反锐化掩模</option>

                {# (size, rank) #}
                <option value="RankFilter">等级滤波</option>

            </select>
        </div>

        {# 高斯模糊半径 radius #}
        <div class="form-group GaussianBlur-radius options" style="display: none">
            <label> 模糊半径:
                <input type="number" step="0.1" name="GaussianBlur-radius" value="2" required>
            </label>
        </div>

        {# 均值滤波 size #}
        <div class="form-group MFilter-size options" style="display: none">
            <label> 内核大小:
                <input type="number" step="2" min="1" name="MFilter-size" value="3" required>(奇数)
            </label>
        </div>

        {# 反锐化掩模 (radius=2, percent=150, threshold=3) #}
        <div class="UnsharpMask options" style="display: none">
            <div class="form-group">
                <label> 模糊半径:
                    <input type="number" step="0.1" name="UnsharpMask-radius" value="3" required>
                </label>
            </div>
            <div class="form-group">

                <label> 反锐化强度:
                    <input type="number" step="1" name="UnsharpMask-percent" value="150" required>%(整数)
                </label>
            </div>
            <div class="form-group">

                <label> 阈值:
                    <input type="number" step="1" name="UnsharpMask-threshold" value="3" required>
                </label>
            </div>
        </div>

        {# (size, rank) #}
        <div class="RankFilter options" style="display: none">
            <div class="form-group">
                <label> 内核大小:
                    <input type="number" min="1" step="2" name="RankFilter-size" value="3" required>
                </label>
            </div>
            <div class="form-group">
                <label> 像素值:
                    <input type="number" min="1" step="1" name="RankFilter-rank" value="3" required>
                </label>
            </div>
        </div>

        <div class="form-group">
            <button class="btn btn-success" type="submit">确定</button>
        </div>
    </form>
{% endblock %}

{% block script %}
    <script type="text/javascript" src="/static/js/filter.js"></script>
{% endblock %}